<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://primefaces.org/ui">
   
   <h:head>
   <title>Pagina Inicial</title>
   
   </h:head>
	
	<h:body>
	<p:megaMenu  style="margin-top:20px">
    <p:submenu label="Home" icon="ui-icon-check">
        <p:column>
            <p:submenu label="Cadastro de Usuario">
                <p:menuitem value="Cadastra Usaurio" url="sistema.jsf" />
                
            </p:submenu>
            <p:submenu label="Cadastro de Produtos">
                <p:menuitem value="Cadastra produtos" url="produto.jsf" />
                
            </p:submenu>
        </p:column>
 
        <p:column>
            <p:submenu label="Compra produtos">
                <p:menuitem value="templates" url="compra.jsf" />
               
            </p:submenu>
            <p:submenu label="TV.5">
                <p:menuitem value="TV.5.1" url="#" />
                <p:menuitem value="TV.5.2" url="#" />
                <p:menuitem value="TV.5.3" url="#" />
            </p:submenu>
        </p:column>
 
        <p:column>
            <strong>Image</strong>
            <p:graphicImage name="images/nature1.jpg" width="200"/>
        </p:column>
    </p:submenu>
 
    <p:submenu label="Sports" icon="ui-icon-document">
 
        <p:column>
            <p:submenu label="Sports.1">
                <p:menuitem value="Sports.1.1" url="#" />
                <p:menuitem value="Sports.1.2" url="#" />
            </p:submenu>
            <p:submenu label="Sports.2">
                <p:menuitem value="Sports.2.1" url="#" />
                <p:menuitem value="Sports.2.2" url="#" />
                <p:menuitem value="Sports.2.3" url="#" />
            </p:submenu>
        </p:column>
 
        <p:column>
            <p:submenu label="Sports.4">
                <p:menuitem value="Sports.4.1" url="#" />
                <p:menuitem value="Sports.4.2" url="#" />
            </p:submenu>
            <p:submenu label="Sports.5">
                <p:menuitem value="Sports.5.1" url="#" />
                <p:menuitem value="Sports.5.2" url="#" />
                <p:menuitem value="Sports.5.3" url="#" />
            </p:submenu>
        </p:column>
        <p:column>
            <p:submenu label="Sports.7">
                <p:menuitem value="Sports.7.1" url="#" />
                <p:menuitem value="Sports.7.2" url="#" />
            </p:submenu>
        </p:column>
    </p:submenu>
 
    <p:submenu label="Entertainment" icon="ui-icon-pencil">
        <p:column>
            <p:submenu label="Entertainment.1">
                <p:menuitem value="Entertainment.1.1" url="#" />
                <p:menuitem value="Entertainment.1.2" url="#" />
            </p:submenu>
            <p:submenu label="Entertainment.2">
                <p:menuitem value="Entertainment.2.1" url="#" />
                <p:menuitem value="Entertainment.2.2" url="#" />
                <p:menuitem value="Entertainment.2.3" url="#" />
            </p:submenu>
        </p:column>
 
        <p:column>
            <p:submenu label="Entertainment.4" icon="ui-icon-help">
                <p:menuitem value="Entertainment.4.1" url="#" />
                <p:menuitem value="Entertainment.4.2" url="#" />
            </p:submenu>
            <p:submenu label="Entertainment.5">
                <p:menuitem value="Entertainment.5.1" url="#" />
                <p:menuitem value="Entertainment.5.2" url="#" />
                <p:menuitem value="Entertainment.5.3" url="#" />
            </p:submenu>
        </p:column>
    </p:submenu>
 
    <p:submenu label="Tech" icon="ui-icon-contact">
        <p:column>
            <p:submenu label="Tech.1">
                <p:menuitem value="Tech.1.1" url="#" />
                <p:menuitem value="Tech.1.2" url="#" />
            </p:submenu>
            <p:submenu label="Tech.2">
                <p:menuitem value="Tech.2.1" url="#" />
                <p:menuitem value="Tech.2.2" url="#" />
                <p:menuitem value="Tech.2.3" url="#" />
            </p:submenu>
        </p:column>
 
        <p:column>
            <p:submenu label="Tech.4">
                <p:menuitem value="Tech.4.1" url="#" />
                <p:menuitem value="Tech.4.2" url="#" />
            </p:submenu>
        </p:column>
    </p:submenu>
 
    <p:menuitem value="Quit" url="#" icon="ui-icon-close" />
</p:megaMenu>
	
	<p:imageCompare leftImage="resources/images/lara-ps3.png"
                        rightImage="resources/images/lara-ps4.png"
                        width="450" height="435"/>
                        
        <p:separator/>  <br/>              
                        
                        
   <center>                   
  <p:galleria value="#{imagesView.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true">
    <p:graphicImage name="images/#{image}" alt="Image demostrativa #{image}" title="#{image}" width="450" height="200"/>
</p:galleria>
	</center> 
	
	
	<p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">
    <p:graphicImage name="/demo/images/ajaxloadingbar.gif" />
</p:dialog>
 
<h:form>
    <p:commandButton value="Download" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" icon="ui-icon-arrowthick-1-s">
        <p:fileDownload value="#{fileDownloadView.file}" />
    </p:commandButton>
</h:form>
 
<script type="text/javascript">
function start() {
    PF('statusDialog').show();
}
 
function stop() {
    PF('statusDialog').hide();
}
</script>

<br/>	
<p:separator/>

<h3 style="margin-top: 0">Images</h3>
<p:lightBox styleClass="imagebox" id="lighbox1">  
    <h:outputLink value="resources/images/nature1.jpg" title="Nature 1">  
        <h:graphicImage name="/images/nature1.jpg" id="nature1" style="height: 77px; width: 100px" />  
    </h:outputLink>
 
    <h:outputLink value="resources/images/nature2.jpg" title="Nature 2">  
        <h:graphicImage name="/images/nature2.jpg" id="nature2" style="height: 77px; width: 100px" />  
    </h:outputLink>
 
    <h:outputLink value="resources/images/nature3.jpg" title="Nature 3">  
        <h:graphicImage name="/images/nature3.jpg" id="nature3" style="height: 77px; width: 100px" />  
    </h:outputLink>
 
    <h:outputLink value="resources/images/nature4.jpg" title="Nature 4">  
        <h:graphicImage name="/images/nature4.jpg" id="nature4" style="height: 77px; width: 100px" />  
    </h:outputLink>
</p:lightBox>	
	 
	<br/>
	<p:separator/>
	
	<h3>Inline</h3>
<p:lightBox id="lighbox2">
    <h:outputLink value="#">
        <h:outputText value="Video Content" />
    </h:outputLink>
 
    <f:facet name="inline">
        <p:media value="http://vimeo.com/moogaloop.swf?clip_id=87780794"  width="400" height="225" player="flash" />
    </f:facet>
</p:lightBox>

<br/><br/>
<p:separator/>


<h3>IFrame</h3>
<p:lightBox iframe="true" id="lighbox3">
    <h:outputLink value="sistema.jsf" title="PrimeFaces HomePage">
        <h:outputText value="login" />
    </h:outputLink>
</p:lightBox>


<br/><br/>

<p:separator/>

 <h:outputLink id="content" value="#">
        <h:outputText value="Primefaces" />
    </h:outputLink>
    <p:tooltip id="toolTipContent" for="content">
        <p:graphicImage name="images/binario.jpg" />
    </p:tooltip>
	
	</h:body>
	
	
</html>